<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.SHAPE.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head>
                <ng-template>
                  {{'STYLE' | translate}}
                </ng-template>
              </free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-circle</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.ROUND' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-shield</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.SHIELD' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-skew</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.SKEW' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-skew2</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.SKEW' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-ellipse</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.ELLIPSE' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-ellipse-half</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.HALFELLIPSE' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-ellipse-quarter</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.QUARTERELLIPSE' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template><code>.img-quarter</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.SHAPE.QUARTER' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <img class="img-circle" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-shield" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-skew" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-skew2" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-ellipse" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-ellipse-half" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-ellipse-quarter" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-quarter" src="assets/images/landscape1.jpg" alt=""/>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;img class="img-circle" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-shield" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-skew" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-skew2" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-ellipse" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-ellipse-half" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-ellipse-quarter" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-quarter" src="assets/images/landscape1.jpg" alt=""/&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Border</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <img class="img-circle img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-shield img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-skew img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-skew2 img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-ellipse img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-ellipse-half img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-ellipse-quarter img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
            <img class="img-quarter img-thumbnail" src="assets/images/landscape1.jpg" alt=""/>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;img class="img-circle img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-shield img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-skew img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-skew2 img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-ellipse img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-ellipse-half img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-ellipse-quarter img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
              &lt;img class="img-quarter img-thumbnail" src="assets/images/landscape1.jpg" alt=""/&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
